<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        .top{
            height: 50px;
            background-color: #18BEBE;    
        }
        
        .top .logo{
            width: 140px;
            margin-left: auto;
            margin-right: auto;
        }
        .top .logo img{
            height: 30px;
            margin-top: 10px;
        }
        div{
            box-sizing: border-box;
        }
        
        .nar{
            background: #e5e4e6;
        }
        .nar li{
            float:left;
            list-style: none;
            width: 100px;
            text-align: center;    
        }
        .nar .row:after{
            content: "";
            display: block;
            clear: both;
        }
        .nar a{
            display: block;
            color: #000;
            text-decoration: none;
        }
        .nar .row{
            line-height: 35px;
            
            margin-left: auto;
            margin-right: auto; 
            width: 400px;
        }
        .nar a:hover{
            background-color: #e09e87;
            color: #fff;
        }
        .memu{
            margin: auto auto;
            width: 1000px;
            background-color: #e5e4e6;
            height: 180px; 
        }
        .memu li{
            float: left;
            list-style: none;
            margin-left: 20px;
            text-align: center;
            line-height: 25px;
            margin-top: 5px;
            

        }
        .memu .classes:after{
            content: "";
            display: block;
            clear: both;
        }
        .memu a{
            display: block;
            color: #000;
            text-decoration: none;
        }
        .memu .classes{
            line-height: 35px;
            margin-top: 10px;
            margin-left: 10px;
            width: 800px;
        }
        .memu a:hover{
            background-color: #e09e87;
            color: #fff;
        }
        .memu h4{
            color: #18BEBE;
        }
        .memu .col{
            background-color: #fff;
            border: 2px solid #e198b4;
            width: 60px;
        }
        .container{
            margin-left: auto;
            margin-right: auto;
            width: 1000px;
            font-size: 0px;   
        }
        .container div{
            float: left;
            width: 240px;
            height: 350px;
            border: 1px solid #333;
        }
        .container:after{
            content: "";
            display: block;
            clear: both;
        }
        .container .child{
            margin-right: 13.3333333px;
        }
        .container div{
            margin-top: 13px;
        }
        .container img{
            display: block;
            margin: auto auto;
            margin-top: 15px;
        }
        .container .product p{
            font-size: 14px;
            text-indent: 20px;
            line-height: 20px;
            margin-top: 5px;
        }
        .container .product .leave{
            font-size: 18px;
            text-indent: 20px;
            line-height: 25px;
            margin-top: 10px;
            color: #18BEBE;
        }
        .container .product p:hover{
            color: #f39800;
        }
        .footer{
            width: 1000px;
            margin: auto auto;
            margin-top: 20px;
        }
        .footer .smalltitle{
            font-size: 20px;
            color:#18BEBE; 
        }
        .home {
            margin-top: 20px;
            height: 250px;
            background-color: #515151;
        }
        .home div{
            float: left;
        }
        .home:after{
            content: "";
            display: block;
            clear: both;
        }
        .home .first{
            margin-left: 220px;
            width: 400px;
        }
        .home .second{
            width: 200px;
            margin-top: 80px;
            margin-left: 100px;
        }
        .home .third{
            width: 300px;
            margin-top: 80px;
            margin-left: 100px;
        }
        .home .second td{
            margin-left: 0px;
            width: 150px;
        }
        .home h5{
            color: #fff;
            line-height: 25px;
            margin-top: 10px;
        }
        .home p{
            font-size: 12px;
            color: #fff;
            line-height: 20px;
            margin-top: 5px;
        }
        .home .first img{
            margin-top: 30px;
        }
        .end{
            background-color: #515151;
        }
        .end .last div{
            float: left;
        }
        .end .last:after{
            content: "";
            display: block;
            clear: both;}
        .end .last {
            
            width:1000px;
            margin: auto auto;
            height: 30px;
            color: #fff;
            border-top: 1px solid #fff;
        }
        .end .last .web{
            width: 600px;
        }

    </style>
</head>
<body>
    <div class="top">
        <div class="logo">
            <img src="img/logo.png" alt="">
        </div>    
    </div>
    <div class="nar">
            <ul class="row">
                    <li><a href="#">首页</a></li>
                    <li><a href="#">资讯</a></li>
                    <li><a href="#">测评</a></li>
                    <li><a href="#">商城</a></li>
                </ul>
    </div>
    <br><br>
    <div class="memu">
        <ul class="classes">
            <li><h4>类别</h4></li>
            <li><a href="#">全部</a></li>
            <li><a href="#" class="col">地板</a></li>
            <li><a href="#">涂料</a></li>
            <li><a href="#">墙纸</a></li>
            <li><a href="#">瓷砖</a></li>
            <li><a href="#">粘胶剂</a></li>
            <li><a href="#">油漆</a></li>
            <li><a href="#">家具</a></li>
            <li><a href="#">板材</a></li>
            <li><a href="#">饰品</a></li>
       
        </ul>
        <ul class="classes">
                <li><h4>类型</h4></li>
                <li><a href="#">全部</a></li>
            </ul>
            <ul class="classes">
                    <li><h4>材质</h4></li>
                    <li><a href="#">全部</a></li>
                    <li><a href="#"  class="col">实木</a></li>
                    <li><a href="#">复合</a></li>
                    <li><a href="#">强化</a></li>
                    <li><a href="#">其他</a></li>
                </ul>
                <ul class="classes">
                        <li><h4>品牌</h4></li>
                        <li><a href="#">全部</a></li>
                        <li><a href="#" class="col">圣像</a></li>
                        <li><a href="#">大自然</a></li>
                        <li><a href="#">生活家</a></li>
                        <li><a href="#">北美枫情</a></li>
                        <li><a href="#">德尔</a></li>
                        <li><a href="#">波点</a></li>
                        <li><a href="#">船王</a></li>
                        
                    </ul>
    </div>
    <br><br>
    <div class="container">
        <div class="child  product">
            <img src="img/data_image.png" alt="">
            
            <p>德尔   都市系列3005</p>
            <p>木地板 - 复合地板</p>
            <p>单价：128元/m^2</p>
            <p class="leave"><strong>环保评级：</strong>B（可以使用）</p>
            
            
        
        </div>
        <div class="child   product">
                <img src="img/data_image.png" alt="">
            
                <p>德尔   都市系列3005</p>
                <p>木地板 - 复合地板</p>
                <p>单价：128元/m^2</p>
                <p class="leave"><strong>环保评级：</strong>B（可以使用）</p>
        </div>
        <div class="child   product">
                <img src="img/data_image.png" alt="">
            
                <p>德尔   都市系列3005</p>
                <p>木地板 - 复合地板</p>
                <p>单价：128元/m^2</p>
                <p class="leave"><strong>环保评级：</strong>B（可以使用）</p>
        </div>
        <div class="product">
                <img src="img/data_image.png" alt="">
            
                <p>德尔   都市系列3005</p>
                <p>木地板 - 复合地板</p>
                <p>单价：128元/m^2</p>
                <p class="leave"><strong>环保评级：</strong>B（可以使用）</p>
        </div>
        <div class="child  product">
                <img src="img/data_image.png" alt="">
            
                <p>德尔   都市系列3005</p>
                <p>木地板 - 复合地板</p>
                <p>单价：128元/m^2</p>
                <p class="leave"><strong>环保评级：</strong>B（可以使用）</p>
        </div>
        <div class="child  product">
                <img src="img/data_image.png" alt="">
            
                <p>德尔   都市系列3005</p>
                <p>木地板 - 复合地板</p>
                <p>单价：128元/m^2</p>
                <p class="leave"><strong>环保评级：</strong>B（可以使用）</p>
        </div>
        <div class="child  product">
                <img src="img/data_image.png" alt="">
            
                <p>德尔   都市系列3005</p>
                <p>木地板 - 复合地板</p>
                <p>单价：128元/m^2</p>
                <p class="leave"><strong>环保评级：</strong>B（可以使用）</p>
        </div>
        <div class="product">
                <img src="img/data_image.png" alt="">
            
                <p>德尔   都市系列3005</p>
                <p>木地板 - 复合地板</p>
                <p>单价：128元/m^2</p>
                <p class="leave"><strong>环保评级：</strong>B（可以使用）</p>
        </div>
    </div>
    <div class="footer">
        <table>
            <tr><td rowspan="3"><img src="img/small_weixin.png" alt=""></td><td class="smalltitle">建材检测 需求反馈</td></tr>
            <tr><td>亲爱的用户，我们正在不断的完善和更新建材库，<br>若没有找到您想要的材料信息，请将能测的材料告诉我们。</td></tr>
            
        </table>
    </div>
    <div class="home">
        <div class="first">
            <img src="img/footerLogo.png" alt="">
            <h5>为室内环境健康把好每一关</h5>
            <p>家具一生致力于中国人的家居健康问题，通过专业的技术研究<br>和测评，清理吸住大众打造绿色、环保的省局生活环境。</p>
        </div>
        <div class="second">
            <table>
                <tr><td><p>关于我们</p></td><td><p>版权说明</p></td></tr>
                <tr><td><p>联系我们</p></td><td><p>用户隐私</p></td></tr>
                <tr><td><p>加入我们</p></td><td><p>免责申明</p></td></tr>
            </table>
        </div>
        <div class="third">
            <table>
                <tr><td><img src="img/weixin2.png" alt=""></td><td><p>官方威信</p></td></tr>
                <tr><td><img src="img/tianmao.png" alt=""></td><td><p>天猫旗舰店</p></td></tr>
                <tr><td><img src="img/shop.png" alt=""></td><td><p>有赞商城</p></td></tr>
            </table>
        </div>

    </div>
    <div class="end">
            <div class="last">
                <div class="web"><p>深圳建筑科学研究股份有限公司     家居医生网</p></div>
                <div class="number"><p>粤ICP备08112112号 @Copyring All Rights Reserved</p></div>
        
            </div>
    </div>
    
</body>
</html>